<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>教学管理系统 - 注册</title>
    <!-- 引入Vue.js 2 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36CFC9',
                        success: '#52C41A',
                        warning: '#FAAD14',
                        danger: '#FF4D4F',
                        info: '#8C8C8C',
                        'bg-light': '#F5F7FA',
                        'bg-dark': '#1D2129',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    boxShadow: {
                        'card': '0 4px 20px rgba(0, 0, 0, 0.08)',
                        'card-hover': '0 8px 30px rgba(0, 0, 0, 0.12)',
                        'nav': '0 4px 20px rgba(0, 0, 0, 0.05)',
                    },
                    animation: {
                        'gradient': 'gradient 6s linear infinite',
                        'float': 'float 6s ease-in-out infinite',
                        'fade-in': 'fadeIn 0.5s ease-in-out',
                        'slide-up': 'slideUp 0.5s ease-out',
                    },
                    backgroundImage: {
                        'gradient-primary': 'linear-gradient(45deg, var(--tw-gradient-from), var(--tw-gradient-to))',
                    },
                },
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }

            .animate-float {
                animation: float 6s ease-in-out infinite;
            }

            .animate-fade-in {
                animation: fadeIn 0.5s ease-in-out;
            }

            .animate-slide-up {
                animation: slideUp 0.5s ease-out;
            }

            .card-shadow {
                box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
            }

            .text-gradient {
                background-clip: text;
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }

            .bg-blur {
                backdrop-filter: blur(8px);
            }

            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }

            .hover-trigger .hover-target {
                opacity: 0;
                transform: translateX(-10px);
                transition: all 0.3s ease;
            }

            .hover-trigger:hover .hover-target {
                opacity: 1;
                transform: translateX(0);
            }
        }

        @keyframes gradient {
            0% {
                background-position: 0% 50%;
            }

            50% {
                background-position: 100% 50%;
            }

            100% {
                background-position: 0% 50%;
            }
        }

        @keyframes float {
            0% {
                transform: translateY(0px);
            }

            50% {
                transform: translateY(-10px);
            }

            100% {
                transform: translateY(0px);
            }
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        @keyframes slideUp {
            from {
                transform: translateY(20px);
                opacity: 0;
            }

            to {
                transform: translateY(0);
                opacity: 1;
            }
        }
    </style>
    <style>
        body {
            background-color: #F5F7FA;
        }

        .register-container {
            background: rgba(255, 255, 255, 0.9);
            border-radius: 16px;
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
            border: 1px solid rgba(255, 255, 255, 0.3);
        }

        .input-field {
            transition: all 0.3s ease;
        }

        .input-field:focus {
            border-color: #165DFF;
            box-shadow: 0 0 0 3px rgba(22, 93, 255, 0.25);
        }

        .button {
            transition: all 0.3s ease;
        }

        .button:hover {
            transform: translateY(-2px);
        }

        .register-icon {
            color: #165DFF;
            animation: float 3s ease-in-out infinite;
        }

        .error-message {
            color: #FF4D4F;
            font-size: 0.8rem;
            margin-top: 0.25rem;
        }
    </style>
</head>
<body class="min-h-screen flex items-center justify-center font-inter bg-bg-light dark:bg-bg-dark transition-colors duration-300">
<div id="app" class="register-container p-6 rounded-3xl shadow-2xl w-full max-w-3xl">
    <div class="flex flex-col md:flex-row">
        <!-- 左侧：注册图标区域 -->
        <div class="flex-1 flex flex-col items-center justify-center p-8 border-b md:border-b-0 md:border-r border-gray-200">
            <div class="register-icon text-[120px] mb-4">
                <i class="fa fa-user-plus"></i>
            </div>
            <h2 class="text-2xl font-bold text-center text-gray-700">创建新账户</h2>
            <p class="text-center text-gray-500 mt-2">填写以下信息注册账号</p>
        </div>

        <!-- 右侧：注册表单区域 -->
        <div class="flex-1 p-8">
            <h3 class="text-xl font-bold text-center text-gray-800 mb-6">注册</h3>
            <form @submit.prevent="handleRegister">
                <div class="mb-4">
                    <label for="username" class="block text-sm font-medium text-gray-700 mb-1">用户名</label>
                    <div class="relative">
                            <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                                <i class="fa fa-user"></i>
                            </span>
                        <input
                                type="text"
                                id="username"
                                v-model="form.username"
                                class="input-field w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none"
                                placeholder="请输入用户名"
                        >
                    </div>
                    <p v-if="errors.username" class="error-message">{{ errors.username }}</p>
                </div>

                <div class="mb-4">
                    <label for="email" class="block text-sm font-medium text-gray-700 mb-1">邮箱</label>
                    <div class="relative">
                            <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                                <i class="fa fa-envelope"></i>
                            </span>
                        <input
                                type="email"
                                id="email"
                                v-model="form.email"
                                class="input-field w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none"
                                placeholder="请输入邮箱地址"
                        >
                    </div>
                    <p v-if="errors.email" class="error-message">{{ errors.email }}</p>
                </div>

                <div class="mb-4">
                    <label for="password" class="block text-sm font-medium text-gray-700 mb-1">密码</label>
                    <div class="relative">
                            <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                                <i class="fa fa-lock"></i>
                            </span>
                        <input
                                type="password"
                                id="password"
                                v-model="form.password"
                                class="input-field w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none"
                                placeholder="请输入密码"
                        >
                    </div>
                    <p v-if="errors.password" class="error-message">{{ errors.password }}</p>
                </div>

                <div class="mb-6">
                    <label for="confirmPassword" class="block text-sm font-medium text-gray-700 mb-1">确认密码</label>
                    <div class="relative">
                            <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                                <i class="fa fa-lock"></i>
                            </span>
                        <input
                                type="password"
                                id="confirmPassword"
                                v-model="form.confirmPassword"
                                class="input-field w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none"
                                placeholder="请再次输入密码"
                        >
                    </div>
                    <p v-if="errors.confirmPassword" class="error-message">{{ errors.confirmPassword }}</p>
                </div>

                <button
                        type="submit"
                        class="button w-full bg-primary text-white py-3 px-4 rounded-lg hover:bg-primary/90 mb-4"
                >
                    <i class="fa fa-user-plus mr-2"></i>注册
                </button>

                <div class="flex items-center justify-center">
                    <span class="text-sm text-gray-600">已有账号?</span>
                    <button
                            type="button"
                            @click="goToLogin"
                            class="ml-2 text-sm font-medium text-primary hover:text-primary/80"
                    >
                        立即登录
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
</body>
<script src="/static/js/message.js"></script>
<script src="/static/js/axios.min.js"></script>
<script src="/static/js/common.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            form: {
                username: '',
                password: '',
                confirmPassword: '',
                email: '',
            },
            errors: {}
        },
        methods: {
            validateForm() {
                this.errors = {};
                let isValid = true;

                if (!this.form.username) {
                    this.errors.username = '请输入用户名';
                    isValid = false;
                }

                if (!this.form.password) {
                    this.errors.password = '请输入密码';
                    isValid = false;
                } else if (this.form.password.length < 5) {
                    this.errors.password = '密码长度至少为5位';
                    isValid = false;
                }

                if (!this.form.confirmPassword) {
                    this.errors.confirmPassword = '请确认密码';
                    isValid = false;
                } else if (this.form.confirmPassword !== this.form.password) {
                    this.errors.confirmPassword = '两次输入的密码不一致';
                    isValid = false;
                }

                if (!this.form.email) {
                    this.errors.email = '请输入邮箱地址';
                    isValid = false;
                } else if (!this.validateEmail(this.form.email)) {
                    this.errors.email = '请输入有效的邮箱地址';
                    isValid = false;
                }

                return isValid;
            },

            validateEmail(email) {
                const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
                return re.test(email);
            },

            async handleRegister() {
                if (this.validateForm()) {
                    await axios.post('/register', this.form);
                    message.success('注册成功');
                    setTimeout(() => {
                        window.location = '/login';
                    }, 1500);
                }
            },

            goToLogin() {
                window.location.href = '/login';
            }
        }
    });
</script>
</html>